<template>
  <div>
    <!-- 顶部通栏 -->
    <appNavbar />
    <!-- 吸顶组件 -->
    <AppHeaderSticky />
    <!-- 头部组件 -->
    <appHeader />
    <!-- 中心内容 -->
    <main>
      <!-- 二级路由 -->
      <router-view></router-view>
    </main>
    <!-- 底部组件 -->
    <appFooter/>
  </div>
</template>

<script>
import appNavbar from "../component/app-navbar.vue";
import appHeader from "../component/app-header.vue";
import appFooter from "../component/app-footer.vue";
import AppHeaderSticky from "../component/app-header-sticky.vue"
import {useStore} from "vuex"
export default {
  name: "VueLayout",
  components: { appNavbar,appHeader,appFooter,AppHeaderSticky },
  setup() {
    const store = useStore()
    store.dispatch('category/getList')
  }
};
</script>

<style lang="less" scoped>
.test {
  .hoverShadow();
  color: @xtxColor;
}
</style>
